<!DOCTYPE html>
<html ng-app="ionicApp">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<title>选择宠物类型</title>
		<link rel="stylesheet" href="../ionic-v1.3.3/css/ionic.css" />
        <script type="text/javascript" src="../ionic-v1.3.3/js/ionic.bundle.min.js" ></script>
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/public.js"></script>
    	<link href="../css/public.css" rel="stylesheet" />
    	<script src="../js/choose-type.js"></script>
    	<style>
    	    .main{margin-top:30px;}
    		img{display:block;width:80%;margin:0px auto;}
    		.dog{padding-top:7.8%;}
    		.word{margin-top:-20px;font-size:1.35em;}
    		.click{width:80%;margin:20px auto;}
    		.duigou{width:30px;height:30px;position:relative;top:-68%;left:28%;}
    		.dog-img{display:none;top:-73%;left:32%;}
    		.inp input{display:none;}
    	</style>
	</head>
	<body ng-controller="MyCtrl">
		<ion-header-bar class="header" align-title="center">
			    <div class="back-padiv" onClick="back()">   
			      <img class="back" src="../img/back.png" />  
			    </div>  
			    <ion-title class="my-title head">选择宠物类型</ion-title> 
		</ion-header-bar>
		
		<ion-content scroll="false">
			<div class="main">
				<div class="row">
			        <div class="clo inp" id="0">
			        	<input type="radio" name="group" value="猫" checked="checked">
			        	<img src="../img/miaomiao.png"/>
			        	<img class="duigou cat-img" src="../img/duigou.png"/>
			        </div>
			        <div class="clo dog inp" id="1">
			        	<input type="radio" name="group" value="狗">
			        	<img src="../img/gougou.png"/>
			        	<img class="duigou dog-img" src="../img/duigou.png"/>
			        </div>
			    </div>
			    <div class="word">
			    	<div class="row text-center">
				    	<div class="col miaomiao">喵喵</div>
				    	<div class="col gougou">狗狗</div>
				    </div>
			    </div>
			</div>
		    
			<div class="col text-center">
	        	<button class="click" ng-click="toLogin()">下一步</button> 
 			</div>
 		</ion-content>
 		<script>
 			$(".inp").click(function(){
		       var id= $(this).attr("id");
		       if(id==0){
		       	   $(".miaomiao").css("color","#FF902E");
		       	   $(".gougou").css("color","#000");
		       	   $(".click").click(function(){
		       	   		window.location.href="love-experience-cat.html";
		       	   		
		       	   		$(".dogimg").css("display","block");
		       	   		$(".gou-dog").css("display","none");
		       	   });
		       }
		       
		       if(id==1){
		       	   $(".gougou").css("color","#FF902E");
		       	   $(".miaomiao").css("color","000");
		       	   $(".click").click(function(){
		       	   		window.location.href="love-experience-dog.html";
		       	   		$(".gou-dog").css("display","block");
		       	   		$(".gou-cat").css("display","none");
		       	   });
		       }
		       var  $radio = $(this).find("input[type=radio]"),
             		$flag  = $radio.is(":checked");
             			
    			if( !$flag ){
        		$radio.prop("checked",true);
        		
   				}
		    });
 		</script>
	</body>
</html>
